<template>
	<view class="navbar uv-flex-row">
		<view class="left uv-flex-row">
			<!-- logo start -->
			<logo></logo>
			<!-- logo end -->
			<!-- 返回 start -->
			<view class="back uv-flex-row hover" @click="back">
				<svg xmlns="http://www.w3.org/2000/svg" width="53" height="53" viewBox="0 0 53 53" fill="none">
					<path d="M22.1744 51.9924L1 30.821V22.1865L22.1821 1H30.818L52 22.179V30.8134L30.818 51.9924H22.1744Z" fill="url(#paint0_linear_132_35222)" stroke="#545477" stroke-width="2" />
					<path opacity="0.35" d="M23.0405 46.4941L6.5 29.956V23.0498L23.0464 6.5H29.9536L46.5 23.044V29.9501L29.9536 46.4941H23.0405Z" fill="url(#paint1_linear_132_35222)" stroke="#545477" />
					<path class="svg-hover"
						d="M23.4608 31.5152C23.4608 31.6552 23.421 31.7923 23.3461 31.9101C23.2712 32.0279 23.1644 32.1214 23.0383 32.1796C22.9122 32.2378 22.7723 32.2581 22.6351 32.2382C22.4979 32.2182 22.3693 32.1589 22.2646 32.0672L13.2497 24.1748C13.1713 24.1062 13.1084 24.0215 13.0654 23.9262C13.0223 23.831 13 23.7275 13 23.6228C13 23.5181 13.0223 23.4146 13.0654 23.3194C13.1084 23.2241 13.1713 23.1394 13.2497 23.0708L22.2646 15.1784C22.3693 15.0867 22.4979 15.0274 22.6351 15.0074C22.7723 14.9875 22.9122 15.0078 23.0383 15.066C23.1644 15.1242 23.2712 15.2177 23.3461 15.3355C23.421 15.4533 23.4608 15.5904 23.4608 15.7304V19.6072H27.4359C33.7463 19.6072 38.8771 24.7136 38.9978 31.0589L39 31.2889C39 32.5863 38.7904 33.8348 38.4045 35C36.9329 30.7143 32.9014 27.6384 28.1587 27.6384H23.4608V31.5152Z"
						fill="#7F7FB2" />
					<defs>
						<linearGradient id="paint0_linear_132_35222" x1="26.5" y1="0" x2="26.5" y2="53" gradientUnits="userSpaceOnUse">
							<stop stop-color="#1D1D1F" />
							<stop offset="1" stop-color="#333337" />
						</linearGradient>
						<linearGradient id="paint1_linear_132_35222" x1="26.5" y1="6" x2="26.5" y2="47" gradientUnits="userSpaceOnUse">
							<stop stop-color="#1D1D1F" />
							<stop offset="1" stop-color="#333337" />
						</linearGradient>
					</defs>
				</svg>
				<text class="text">返回</text>
			</view>
			<!-- 返回 end -->
		</view>
		<!-- 切换角色 start -->
		<view class="character uv-flex-row" @click="selectHandle('character')">
			<view class="avatar">
				<character-avatar :avatar="character.avatar" />
			</view>
			<view class="select btn-hover uv-flex-row" :class="[{'btn-active':dropDown.character}]">
				<text class="btn-hover-text uv-line-1">{{character.nickname}}</text>
				<svg xmlns="http://www.w3.org/2000/svg" width="11" height="5" viewBox="0 0 11 5" fill="none">
					<path class="btn-hover-icon" fill-rule="evenodd" clip-rule="evenodd" d="M0 0H5.5H11L5.5 5L0 0Z" fill="#545477" />
				</svg>
			</view>
			<view class="drop-down" v-if="dropDown.character">
				<drop-down-character />
			</view>
		</view>
		<!-- 切换角色 end -->
		<view class="right uv-flex-row">
			<view class="item btn-hover uv-flex-row" :class="[{'btn-active':dropDown.account}]" @click="selectHandle('account')">
				<svg xmlns="http://www.w3.org/2000/svg" width="53" height="53" viewBox="0 0 53 53" fill="none">
					<path d="M22.1744 51.9924L1 30.821V22.1865L22.1821 1H30.818L52 22.179V30.8134L30.818 51.9924H22.1744Z" fill="url(#paint0_linear_224_155)" stroke="#545477" stroke-width="2" />
					<path opacity="0.35" d="M23.0405 46.4941L6.5 29.956V23.0498L23.0464 6.5H29.9536L46.5 23.044V29.9501L29.9536 46.4941H23.0405Z" fill="url(#paint1_linear_224_155)" stroke="#545477" />
					<path class="btn-hover-icon"
						d="M26.274 26.2434C29.5958 26.2434 32.2987 23.581 32.2985 20.3072C32.2985 17.0336 29.5958 14.371 26.274 14.371C22.9522 14.371 20.2495 17.0346 20.2495 20.3072C20.2495 23.5801 22.9522 26.2434 26.274 26.2434ZM28.7567 26.815H24.2426C20.0478 26.815 16.6359 30.1745 16.6359 34.3051V34.7497C16.6359 36.9091 19.9932 36.9091 24.2426 36.9091H28.7567C32.8389 36.9091 36.3641 36.9091 36.3641 34.7497V34.3051C36.364 30.1754 32.9516 26.815 28.7567 26.815Z"
						fill="#7F7FB2" />
					<defs>
						<linearGradient id="paint0_linear_224_155" x1="26.5" y1="0" x2="26.5" y2="53" gradientUnits="userSpaceOnUse">
							<stop stop-color="#1D1D1F" />
							<stop offset="1" stop-color="#333337" />
						</linearGradient>
						<linearGradient id="paint1_linear_224_155" x1="26.5" y1="6" x2="26.5" y2="47" gradientUnits="userSpaceOnUse">
							<stop stop-color="#1D1D1F" />
							<stop offset="1" stop-color="#333337" />
						</linearGradient>
					</defs>
				</svg>
				<text class="btn-hover-text">我的账号</text>
				<view class="drop-down" v-if="dropDown.account">
					<drop-down-account />
				</view>
			</view>
			<view class="item btn-hover uv-flex-row" :class="[{'btn-active':dropDown.nav}]" @click="selectHandle('nav')">
				<svg xmlns="http://www.w3.org/2000/svg" width="53" height="53" viewBox="0 0 53 53" fill="none">
					<path d="M22.1744 51.9924L1 30.821V22.1865L22.1821 1H30.818L52 22.179V30.8134L30.818 51.9924H22.1744Z" fill="url(#paint0_linear_224_147)" stroke="#545477" stroke-width="2" />
					<path opacity="0.35" d="M23.0405 46.4941L6.5 29.956V23.0498L23.0464 6.5H29.9536L46.5 23.044V29.9501L29.9536 46.4941H23.0405Z" fill="url(#paint1_linear_224_147)" stroke="#545477" />
					<path class="btn-hover-icon" fill-rule="evenodd" clip-rule="evenodd"
						d="M33.5909 19.0909C33.5909 23.0061 26.8251 33.1837 26.5 33.1837C26.1749 33.1837 19.4091 23.0061 19.4091 19.0909C19.4091 15.1756 22.5847 12 26.5 12C30.4153 12 33.5909 15.1756 33.5909 19.0909ZM26.5 15.7388C24.6491 15.7388 23.1479 17.24 23.1479 19.0909C23.1479 20.9419 24.6491 22.4429 26.5 22.4429C28.3508 22.4429 29.852 20.9419 29.852 19.0909C29.852 17.24 28.351 15.7388 26.5 15.7388ZM34.1363 33.5248C34.1363 32.6916 33.1675 31.9423 31.6256 31.4236C34.7662 32.1205 36.8852 33.4377 36.8852 34.9477C36.8852 37.1853 32.2341 39 26.5 39C20.7659 39 16.1149 37.1853 16.1149 34.9478C16.1149 33.4377 18.2338 32.1205 21.3745 31.4236C19.8325 31.9424 18.8637 32.6916 18.8637 33.5248C18.8637 35.0908 22.2836 36.3605 26.5 36.3605C30.7165 36.3605 34.1363 35.0907 34.1363 33.5248Z"
						fill="#7F7FB2" />
					<defs>
						<linearGradient id="paint0_linear_224_147" x1="26.5" y1="0" x2="26.5" y2="53" gradientUnits="userSpaceOnUse">
							<stop stop-color="#1D1D1F" />
							<stop offset="1" stop-color="#333337" />
						</linearGradient>
						<linearGradient id="paint1_linear_224_147" x1="26.5" y1="6" x2="26.5" y2="47" gradientUnits="userSpaceOnUse">
							<stop stop-color="#1D1D1F" />
							<stop offset="1" stop-color="#333337" />
						</linearGradient>
					</defs>
				</svg>
				<text class="btn-hover-text">舰队导航</text>
				<view class="drop-down" v-if="dropDown.nav">
					<drop-down-nav />
				</view>
			</view>
			<view class="item btn-hover uv-flex-row" :class="[{'btn-active':dropDown.help}]" @click="selectHandle('help')">
				<svg xmlns="http://www.w3.org/2000/svg" width="53" height="53" viewBox="0 0 53 53" fill="none">
					<path d="M22.1744 51.9924L1 30.821V22.1865L22.1821 1H30.818L52 22.179V30.8134L30.818 51.9924H22.1744Z" fill="url(#paint0_linear_224_141)" stroke="#545477" stroke-width="2" />
					<path opacity="0.35" d="M23.0405 46.4941L6.5 29.956V23.0498L23.0464 6.5H29.9536L46.5 23.044V29.9501L29.9536 46.4941H23.0405Z" fill="url(#paint1_linear_224_141)" stroke="#545477" />
					<path class="btn-hover-icon"
						d="M33.905 16.4738C33.178 15.3159 32.2655 14.4482 30.9911 13.8677C29.7774 13.2902 28.3813 13 26.7418 13C24.132 13 22.0059 13.6936 20.4881 15.1418H20.4273C18.8517 16.529 18 18.3834 18 20.5832C18 20.7573 18.0608 20.8734 18.1825 20.9866C18.3042 21.1027 18.4258 21.1607 18.6053 21.1607H22.9762C23.1587 21.1607 23.2804 21.1027 23.399 20.9866C23.5207 20.8705 23.5815 20.7544 23.5815 20.5832C23.5815 19.8316 23.8857 19.2511 24.4301 18.7868C24.9168 18.3225 25.6438 18.0932 26.4954 18.0932C27.3441 18.0932 28.0132 18.2673 28.5607 18.6707C28.9835 19.0741 29.166 19.4224 29.2269 19.9447C29.2269 20.293 29.1052 20.6384 28.9835 20.9286C28.6794 21.2768 28.0132 21.9704 26.8574 22.8991H26.9182C25.6438 23.941 24.7313 25.0989 24.126 26.3178C23.5207 27.5918 23.2773 28.9239 23.2773 30.4301V31.1237C23.2773 31.2978 23.2773 31.4139 23.4598 31.53C23.5815 31.6461 23.7032 31.7041 23.8857 31.7041H28.3782C28.4999 31.7041 28.6824 31.6461 28.8041 31.53C28.9257 31.4139 28.9866 31.2978 28.9866 31.1817C28.9866 30.1979 29.1082 29.5014 29.2908 28.9819V28.9239C29.4124 28.4044 29.5949 28.0561 29.7774 27.824L29.8383 27.7659C30.0816 27.4177 30.6261 26.8402 31.5386 26.0276C32.5697 25.1598 33.2389 24.4633 33.543 24.057C34.0267 23.4215 34.3917 22.725 34.635 22.0865C34.8783 21.3929 35 20.6964 35 20.0608C34.997 18.7897 34.632 17.5737 33.905 16.4738ZM28.6855 35.3264C28.0193 34.6908 27.1677 34.4006 26.1974 34.4006C25.2879 34.4006 24.4362 34.6908 23.7701 35.3264H23.7092C23.0431 36.02 22.6781 36.7745 22.6781 37.7003C22.6781 38.568 23.0431 39.3806 23.7701 40.0742C24.4362 40.6517 25.2879 41 26.1974 41C27.1677 41 28.0193 40.6517 28.7463 40.0742V40.0162C29.4124 39.3806 29.7166 38.568 29.7166 37.7003C29.7166 36.7745 29.4124 36.02 28.7463 35.3264H28.6855Z"
						fill="#7F7FB2" />
					<defs>
						<linearGradient id="paint0_linear_224_141" x1="26.5" y1="0" x2="26.5" y2="53" gradientUnits="userSpaceOnUse">
							<stop stop-color="#1D1D1F" />
							<stop offset="1" stop-color="#333337" />
						</linearGradient>
						<linearGradient id="paint1_linear_224_141" x1="26.5" y1="6" x2="26.5" y2="47" gradientUnits="userSpaceOnUse">
							<stop stop-color="#1D1D1F" />
							<stop offset="1" stop-color="#333337" />
						</linearGradient>
					</defs>
				</svg>
				<text class="btn-hover-text">帮助中心</text>
				<view class="drop-down drop-down-help" v-if="dropDown.help">
					<drop-down-help />
				</view>
			</view>
		</view>
		<bind-mobile-popup ref="bindMobileRef" />
		<unbind-mobile-popup ref="unbindMobileRef" />
		<game-seting ref="gameSetingRef" />
		<contact-group-popup ref="contactGroupPopupRef" />
		<online-service-popup ref="onlineServicePopupRef" />
		<del-account-popup ref="delAccountPopupRef" />
	</view>
</template>
<script setup>
	import { computed, defineComponent, reactive, ref } from 'vue';
	import characterAvatar from './components/character-avatar.vue';
	import dropDownCharacter from './components/drop-down-character.vue';
	import dropDownAccount from './components/drop-down-account.vue';
	import dropDownHelp from './components/drop-down-help.vue';
	import dropDownNav from './components/drop-down-nav.vue';
	import useDropDown from './hooks/useDropDown';
	import bindMobilePopup from './components/bind-mobile-popup.vue';
	import unbindMobilePopup from './components/unbind-mobile-popup.vue';
	import contactGroupPopup from './components/contact-group-popup.vue';
	import onlineServicePopup from './components/online-service-popup.vue';
	import delAccountPopup from './components/del-account-popup.vue';
	defineComponent({ characterAvatar, dropDownCharacter, dropDownHelp, dropDownNav, dropDownAccount, bindMobilePopup, contactGroupPopup, onlineServicePopup, delAccountPopup });
	const { dropDown, selectHandle } = useDropDown();
	const bindMobileRef = ref(null);
	const unbindMobileRef = ref(null);
	const gameSetingRef = ref(null);
	const contactGroupPopupRef = ref(null);
	const onlineServicePopupRef = ref(null);
	const delAccountPopupRef = ref(null);
	uni.$on('bind-mobile', res => {
		bindMobileRef.value.open();
	})
	uni.$on('unbind-mobile', res => {
		unbindMobileRef.value.open();
	})
	uni.$on('game-seting', res => {
		gameSetingRef.value.open();
	})
	uni.$on('contact-group', res => {
		contactGroupPopupRef.value.open();
	})
	uni.$on('online-service', res => {
		onlineServicePopupRef.value.open();
	})
	uni.$on('del-account', res => {
		delAccountPopupRef.value.open();
	})
	const character = computed(() => {
		const _character = getApp().globalData.dzcharacter?.character;
		return _character ? _character : {
			nickname: '选择角色'
		};
	})

	function back() {
		if (`/${uni.$uv.pages()[0].route}` == uni.$uv.page()) {
			uni.reLaunch({
				url: '/pages/index/index'
			})
		} else {
			uni.navigateBack();
		}
	}
</script>
<style scoped lang="scss">
	.navbar {
		height: 80px;
		padding: 0 60px;
		justify-content: space-between;
		align-items: center;
		background: #1E1E20;
		.left {
			width: 42%;
			min-width: 300px;
			align-items: center;
			.back {
				margin-left: 100px;
				align-items: center;
				cursor: pointer;
				.text {
					margin-left: 10px;
					font-size: 16px;
					color: #BABAD8;
				}
			}
		}
		.character {
			position: relative;
			align-items: center;
			.avatar {
				position: relative;
				width: 54px;
				height: 54px;
			}
			.select {
				height: 42px;
				margin-left: -30px;
				padding: 0 20px 0 40px;
				border-radius: 11px;
				border: 1px solid #545477;
				overflow: hidden;
				align-items: center;
				text {
					min-width: 60px;
					max-width: 100px;
					margin-right: 10px;
					font-size: 16px;
					color: #BABAD8;
				}
				&:hover,
				&.btn-active {
					border-color: #fff;
				}
				svg {
					flex-shrink: 0;
				}
			}
		}
		.right {
			width: 42%;
			min-width: 300px;
			justify-content: flex-end;
			align-items: center;
			.item {
				position: relative;
				margin-left: 40px;
				align-items: center;
				text {
					margin-left: 8px;
					font-size: 16px;
					color: #BABAD8;
				}
			}
		}
	}
	.drop-down {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 66px;
		border-radius: 8px;
		border: 1px solid #555578;
		background: rgba(0, 0, 0, 0.85);
		box-shadow: 0 4px 13.3px 0 rgba(81, 81, 92, 0.66);
		backdrop-filter: blur(8.4px);
		&-help {
			left: 40%;
		}
	}
	@media screen and (max-width: 1400px) {
		.navbar .left .back {
			margin-left: 50px;
		}
		.navbar .right .item {
			margin-left: 20px;
		}
	}
	@media screen and (max-width: 1200px) {
		.navbar .left .back {
			margin-left: 30px;
		}
		.navbar .right .item {
			margin-left: 10px;
		}
	}
</style>